<!--
 * @Author: your name
 * @Date: 2021-08-27 10:38:39
 * @LastEditTime: 2021-09-20 10:19:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\setting\Icons\index.vue
-->

<!-- 如果更改图标获取删除图标直接在assets/svg下操作  -->
<template>
    <div>
        <Table
            :columns="columns"
            :data-source="datas"
            :row-key="(record) => record.name"
        >
            <template #duration="{ record }">
                <Tag
                    :color="record.duration > 50 ? '#f40' : '#007fff'"
                >
                    {{ record.duration }}ms
                </Tag>
            </template>
            <template #size="{ record }">
                <Tag :color="record.size > 300 ? '#f40' : '#007fff'">
                    {{
                        SizeFilter(record.size)
                    }}
                </Tag>
            </template>
            <template #tag="{ record }">
                <Tag color="green">依赖文件</Tag>
            </template>
        </Table>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { Table, Tag } from 'ant-design-vue'

export default defineComponent({
    name: 'TableList',
    components: {
        Table,
        Tag,
    },
    props: {
        datas: [Array],
        columns: [Array],
    },
    setup(props) {
    //   头部数据放在组件下

        // 过滤文件大小
        const SizeFilter = function (size) {
            return (Math.round((size * 100) / 1024) / 100).toString() + 'KB'
        }
        return {
            SizeFilter,
        }
    },
})
</script>
<style lang="less" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
</style>
